<template>
    <a-layout style="min-height: 100vh">
        <a-layout-sider v-model:collapsed="collapsed" collapsible>
            <div class="logo" />

            <!-- <a-menu v-if="store.role == 0" v-model:selectedKeys="selectedKeys" theme="dark" mode="inline"
                v-model:openKeys="openKeys" :check-strictly="true" @click="handleClick">
                <a-sub-menu key="home">
                    <template #title>
                        <span>
                            <home-outlined />
                            <span>首页</span>
                        </span>
                    </template>
                    <a-menu-item key="statistics">信息统计</a-menu-item>
                    <a-menu-item key="pending">待处理事件</a-menu-item>
                </a-sub-menu>
                <a-sub-menu key="managment">
                    <template #title>
                        <span>
                            <exception-outlined />
                            <span>管理</span>
                        </span>
                    </template>
                    <a-menu-item key="product">产品管理</a-menu-item>
                    <a-menu-item key="technician">技师管理</a-menu-item>
                    <a-menu-item key="users">用户管理</a-menu-item>
                    <a-menu-item key="orders">订单管理</a-menu-item>
                    <a-menu-item key="superior">代理管理</a-menu-item>
                </a-sub-menu>
                <a-menu-item key="traveling">
                    <car-outlined />
                    <span>交通出行</span>
                </a-menu-item>
                <a-menu-item key="coupon">
                    <shopping-outlined />
                    <span>优惠卷管理</span>
                </a-menu-item>
                <a-menu-item key="setUser">
                    <UserOutlined />
                    <span>角色设置</span>
                </a-menu-item>
                <a-menu-item key="feedBack">
                    <bell-outlined />
                    <span>意见反馈</span>
                </a-menu-item>
                <a-menu-item key="service">
                    <team-outlined />
                    <span>客服服务</span>
                </a-menu-item>
                <a-sub-menu key="setting">
                    <template #title>
                        <span>
                            <setting-outlined />
                            <span>系统设置</span>
                        </span>
                    </template>
                    <a-menu-item key="pay">支付设置</a-menu-item>
                    <a-menu-item key="homeBanner">首页广告设置</a-menu-item>
                    <a-menu-item key="payRule">退款规则设置</a-menu-item>
                    <a-menu-item key="foundaction">基础设置</a-menu-item>

                </a-sub-menu>
            </a-menu> -->


            <a-menu  v-model:selectedKeys="selectedKeys" theme="dark" mode="inline" v-model:openKeys="openKeys"
                :check-strictly="true" @click="handleClick">
                <template v-for="item in store.file">
                    <a-menu-item v-if="!item.children" :key="item.key">
                        <home-outlined v-if="item.key == 'home'" />
                        <exception-outlined v-if="item.key == 'managment'" />
                        <setting-outlined v-if="item.key == 'setting'" />
                        <shopping-outlined v-if="item.key == 'coupon'" />
                        <car-outlined v-if="item.key == 'traveling'" />
                        <bell-outlined v-if="item.key == 'feedBack'" />
                        <team-outlined v-if="item.key == 'service'" />
                        <UserOutlined v-if="item.key == 'setUser'"/>
                        <ShakeOutlined v-if="item.key == 'report'"/>
                        <span>{{ item.title }}</span>

                    </a-menu-item>

                    <a-sub-menu v-if="item.children" :key="item.key">
                        <template #title>
                            <span>
                                <home-outlined v-if="item.key == 'home'" />
                                <exception-outlined v-if="item.key == 'managment'" />
                                <setting-outlined v-if="item.key == 'setting'" />
                                <shopping-outlined v-if="item.key == 'coupon'" />
                                <car-outlined v-if="item.key == 'travaling'" />
                                <bell-outlined v-if="item.key == 'feedBack'" />
                                <team-outlined v-if="item.key == 'service'" />
                                <span>{{ item.title }}</span>
                            </span>
                        </template>
                        <a-menu-item v-for="child in item.children" :key="child.key">{{ child.title }}</a-menu-item>

                    </a-sub-menu>
                </template>
            </a-menu>
        </a-layout-sider>

        <a-layout>
            <a-layout-header style="background: #fff; padding: 0;display: flex;justify-content: end;align-items: center;">
                <!-- 头像部分 -->
                <user></user>
            </a-layout-header>
            <a-layout-content style="margin: 0 16px">
                <a-breadcrumb :routes="breadData" separator="/     ">
                    <template #itemRender="{ route, paths }">
                        <span v-if="breadData.indexOf(route) == breadData.length - 1" class="bread_link">
                            {{ route.title }}

                        </span>
                        <router-link v-else :to="`/${paths.join('/')}`" class="bread_link">
                            {{ route.title }}

                        </router-link>
                    </template>
                </a-breadcrumb>
                <div :style="{ padding: '24px', background: '#fff', height: '95%', boxSizing: 'border-box' }">
                    <RouterView></RouterView>
                </div>
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>


<script setup>
import { HomeOutlined, ExceptionOutlined, CarOutlined, ShoppingOutlined, SettingOutlined, UserOutlined,BellOutlined,TeamOutlined,ShakeOutlined } from '@ant-design/icons-vue';
import user from './user.vue';
import { ref, onBeforeMount } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import share from '../../util/commnet'
import { useUserData } from '../../stores/userData';
const route = useRoute();
const router = useRouter();
const store = useUserData().data;
const defaultData = [
    {
        path: '/admin/home',
        breadcrumbName: '首页',
        children: [
            {
                path: 'pending',
                breadcrumbName: "待处理事件"
            },
        ]

    },
    {
        path: 'statistics',
        breadcrumbName: "信息统计"
    }
]
const breadData = ref(defaultData)


const collapsed = ref(false);
// 默认选中项
const selectedKeys = ref(["statistics"]);
// 展开项
const openKeys = ref(['home']);

router.beforeEach((to, from) => {
    console.log(to);
    if (to.name == 'login') {
        return;
    }
    if (store.keyArray.includes(to.name)) {
        
        breadData.value = share.getBread(JSON.parse(JSON.stringify(store.file)), to.matched.at(-1).name);
        console.log(breadData.value);
        // 侧边栏高亮
        selectedKeys.value = [to.name]
        // 展开
        openKeys.value = [to.matched[1].name]
    } else {
        if (store.file.some(item => item.key == to.matched.at(-2)?.name)) {
            router.replace({ name: store.file.find(item => item.key == to.matched.at(-2).name).children[0].key })

        } else {
            router.replace({ name: store.keyArray[0].key })
        }
    }
})

onBeforeMount(() => {
    selectedKeys.value = [route.name]
    if (route.matched.length > 2) {
        openKeys.value = [route.matched[1].name]
    }

    breadData.value = share.getBread(JSON.parse(JSON.stringify(store.file)), route.matched.at(-1).name);

})
const handleClick = (item) => {

    router.replace({ name: item.key })
}
</script>

<style scoped lang="scss">
.bread_link {
    margin-left: 30px;
    /* 调整间距大小 */
    margin-right: 20px;
    font-size: 16px;
}
</style>

